<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bear</title>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				background-image: url(green.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.bearbox{
				position: absolute;
				bottom: 50px;
		        width: 200px;
		        height: 100px;
		        background: url('bear.png') no-repeat;
		        animation: bear 1s steps(8) infinite, moves 3s linear forwards;
			}
			@keyframes bear{
	            0%{
	                background-position: 0 0;
	            }
	            100%{
	                background-position: -1600px 0;
	            }
            }
            @keyframes moves{
	            0%{
	               left: 0;
	            }
	            100%{
	                left: 50%;
	                transform: translate(-50%);
	            }
        	}
		</style>
		
	</head>
	<body>
		<div class="bearbox"></div>
	</body>
</html>
